Today I learned@Cybertec

Svitlana Lytvynenko

Frontend Developer

How to chain multiple functions in Javascript properly with async/await

The code below chains multiple functions waits for everything to resolve, and then sends the result:

// chain any number of async functions
const asyncChain = (...fns) => x => fns.reduce(async (res, fn) => fn(await res), x);

// async functions
const add = async x => x + 1;
const multiply = async x => x * 2;
const square = async x => x * x;

const getResult = asyncChain(add, multiply, square);

(async () => console.log(await getResult(4)))(); // 100

The HTML Base element

The HTML <base> element specifies attributes for all links in the document at once.
Let's take a look at this example:

<head>
  <base target="_blank">
</head>

Now all links will open in a new tab by default.

Additionally, the href attribute can be set within <base> tag. This sets the base URL to be used throughout the document for relative URL addresses.

For example:

<head>
  <base href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
</head>

The following link:

<body>
  ...
  <a target="_blank" href="#Usage_notes">Usage notes</a>
  ...
</body>

Will actually point to

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base#Usage_notes

Note:

  • <base> shouldn't have a closing tag. 🤷
  • There can be only one base element in a document.

More info ℹ️

Destructuring assignment features in es6

Today I learned about the helpful ES6 "destructuring" feature to unpack arrays and objects.
It is a convenient way to extract values into distinct variables.

It is possible to object-destructure arrays:

const { 0: x, 2: y, 3: z } = ['a', 'b', 'c', 'd'];
console.log(x) // 'a'
console.log(z) // 'd'

This works because array indices are properties as well!

Alternatively, array-destructuring can be applied to any value that is iterable, not just to arrays:

// Sets are iterable
const mySet = new Set().add('a').add('b').add('c');
const [first, second] = mySet;
console.log(first) // 'a'
console.log(second) // 'b'

// Strings are iterable
const [a, b] = 'xyz';
console.log(a) // 'x'
console.log(b) // 'y'